<!doctype html>
<head>
  <style>
    :root {
      box-sizing: border-box;
    }

    *,
    ::before,
    ::after {
      box-sizing: inherit;
    }

    body {
      background-color: #eee;
      font-family: Helvetica, Arial, sans-serif;
    }

    body * + * {
      margin-top: 1.5em;
    }

    .row {
    }

    .row::after {
      content: " ";
      display: block;
      clear: both;
    }

    [class*="column-"] {
      float: left;
    }

    .column-1 { width: 8.3333%; }
    .column-2 { width: 16.6667%; }
    .column-3 { width: 25%; }
    .column-4 { width: 33.3333%; }
    .column-5 { width: 41.6667%; }
    .column-6 { width: 50%; }
    .column-7 { width: 58.3333%; }
    .column-8 { width: 66.6667%; }
    .column-9 { width: 75%; }
    .column-10 { width: 83.3333%; }
    .column-11 { width: 91.6667% }
    .column-12 { width: 100%; }

    header {
      padding: 1em 1.5em;
      color: #fff;
      background-color: #0072b0;
      border-radius: .5em;
      margin-bottom: 1.5em;
    }

    .main {
      padding: 0 1.5em;
      background-color: #fff;
      border-radius: .5em;
    }

    .container {
      max-width: 1080px;
      margin: 0 auto;
    }

    .media {
      float: left;
      margin: 0 1.5em 1.5em 0;
      width: calc(50% - 1.5em);
      padding: 1.5em;
      background-color: #eee;
      border-radius: 0.5em;
    }

    .media:nth-child(odd) {
      clear: left;
    }

    .media-image {
      float: left;
      margin-right: 1.5em;
    }

    .media-body {
      overflow: auto;
      margin-top: 0;
    }

    .media-body h4 {
      margin-top: 0;
    }

    .clearfix::before,
    .clearfix::after {
      display: table;
      content: " ";
    }
    .clearfix::after {
      clear: both;
    }
  </style>
</head>

<body>
  <div class="container">
    <header>
      <h1>Franklin Running Club</h1>
    </header>

    <main class="main clearfix">
      <h2>Running tips</h2>

      <div class="row">
        <div class="column-6">
          <div class="media">
            <img class="media-image" src="runner.png" width="80">
            <div class="media-body">
              <h4>Strength</h4>
              <p>
                Strength training is an important part of
                injury prevention. Focus on your core&mdash;
                especially your abs and glutes.
              </p>
            </div>
          </div>
        </div>

        <div class="column-6">
          <div class="media">
            <img class="media-image" src="shoes.png" width="80">
            <div class="media-body">
              <h4>Cadence</h4>
              <p>
                Check your stride turnover. The most efficient
                runners take about 180 steps per minute.
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="column-6">
          <div class="media">
            <img class="media-image" src="shoes.png" width="80">
            <div class="media-body">
              <h4>Change it up</h4>
              <p>
                Don't run the same every time you hit the
                road. Vary your pace, and vary the distance
                of your runs.
              </p>
            </div>
          </div>
        </div>

        <div class="column-6">
          <div class="media">
            <img class="media-image" src="runner.png" width="80">
            <div class="media-body">
              <h4>Focus on form</h4>
              <p>
                Run tall but relaxed. Your feet should hit
                the ground beneath your hips, not out in
                front of you.
              </p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</body>
